<template>
	<view class="content-header">
		<view class="top40"></view>
		<view v-if="address==null" class="addre flex-row flex-content-between">
			<view class="flex-row address-not-title">
				<view>*</view>
				<view>收货地址</view>
			</view>
			<view class="flex-row address-not-detal flex-item-center" @tap="toAddress">
				<view>请选择收货地址</view>
				<image src="../../static/order/you.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view v-if="address!=null" class="addre-has flex-row flex-content-between flex-item-center" @tap="toAddress">
			<view class="flex-column addre-has-txt">
				<view>{{address.contact_name}}    {{$utils.hideMobile(address.contact_mobile,"*",3,4)}}</view>
				<view>{{address.province.name}}{{address.city.name}}{{address.area.name}}{{address.address}}</view>
			</view>
			<image src="../../static/order/you.png" mode="scaleToFill"></image>
		</view>
		<view class="top20"></view>
		<view class="goods" v-if="goods_pay_info!=null">
			<view class="goods-info flex-row flex-content-between" v-for="good in goods_pay_info.goods_info">
				<view class="flex-row">
					<image class="goods-info-img" :src="good.image?$utils.cdnImg(good.image):$utils.cdnImg(good.goods.image)" mode="widthFix"></image>
					<view class="flex-column goods-info-price">
						<view>{{good.title}}</view>
						<view>￥{{good.price}}</view>
					</view>
				</view>
				<view class="flex-row goods-info-add">
					<image v-if="has" src="../../static/order/jian-ac.png" mode="scaleToFill"></image>
					<image v-if="has==false" src="../../static/order/jian.png" mode="scaleToFill"></image>
					<view>{{good.num}}</view>
					<image src="../../static/order/jia.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="top20"></view>
		<view class="goods-info-money">
			<view class="goods-info-money1 flex-column">
				<view class="flex-row flex-content-between goods-info-detal">
					<view>配送方式</view>
					<view>物流配送</view>
				</view>
				<view class="flex-row flex-content-between goods-info-detal">
					<view>运费</view>
					<view v-if="goods_pay_info!=null">￥{{goods_pay_info.freight}}</view>
				</view>
				<view class="flex-row flex-content-between goods-info-detal">
					<view>商品价格</view>
					<view class="res" v-if="goods_pay_info!=null">￥{{goods_pay_info.all_money}}</view>
				</view>
			</view>
		</view>
		<mu-suspension bottom="0">
			<view class="foot flex-row flex-content-between">
				<view class="flex-row foot-txt">
					<view>共计{{goods_pay_info!=null?goods_pay_info.goods_info.length:0}}件，</view>
					<view>合计：</view>
					<view v-if="goods_type==0&&goods_pay_info!=null">￥{{goods_pay_info.all_money}}</view>
					<view v-if="goods_type==1">200积分</view>
				</view>
				<view class="foot-btn" @tap="submit" v-if="goods_type==0">提交订单</view>
				<view class="foot-btn" @tap="exchange" v-if="goods_type==1">兑换</view>
			</view>
		</mu-suspension>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				goods_type:0,//商品类型[0=普通商品,1=积分商品]
				address:null,//用户地址
				has:false,//显示减少可用
				goods_pay_info:null,
				allMoney:0,//总金额
				is_shop_cart:0,//是否购物车商品
			}
		},
		onLoad(opt) {
			if(opt.goods_type){
				this.goods_type = opt.goods_type
			}
			if(opt.is_shop_cart){
				this.is_shop_cart = opt.is_shop_cart;
			}
			if(opt.goods_info){
				let data = JSON.parse(decodeURIComponent(opt.goods_info))
				this.getPayOrder(data)
			}
			this.getUserAddress();
		},
		onShow() {
			let get_userAddress = uni.getStorageSync('get_userAddress')
			if(get_userAddress){
				this.address = get_userAddress
				uni.removeStorageSync("get_userAddress")
			}
		},
		methods:{
			//获取用户地址
			getUserAddress(){
				let that = this
				this.$api.getUserAddress().then(res=>{
					// console.log(res);
					that.address = res[0]
					console.log(that.address);
				})
			},
			//获取运费/商品详情
			getPayOrder(data){
				console.log(data);
				let that = this;
				this.$api.getPayOrder({data:data}).then(res=>{
					console.log(res);
					that.goods_pay_info = res;
				})
			},
			//提交订单
			submit(){
				let address = this.address;
				if(!address||address==''){
					this.$utils.showMessage("请选择收货地址");
					return
				}
				let goods_info = [];
				let goods_pay_info = this.goods_pay_info;
				goods_pay_info.goods_info.forEach(item=>{
					goods_info.push({
						goods_id:item.mumerchant_goods_id,
						goods_item_id:item.id,
						num:item.num
					})
				})
				if(goods_info.length==0){
					this.$utils.showMessage("请选择商品")
					return
				}
				let data = {
					goods_info:goods_info,
					address_id:address.id,
					is_shop_cart:this.is_shop_cart
				}
				let that = this;
				this.$api.createOrder(data,true).then(res=>{
					console.log(res);
					that.$store.dispatch("getOrderList")
					that.$store.dispatch("getOrderStatus")
					uni.navigateTo({
						url:'/pages/order/pay_order?order_num='+res.order_num
					})
				})
				// uni.navigateTo({
				// 	url:'/pages/order/pay_order'
				// })
			},
			//兑换积分商品
			exchange(){
				
			},
			//跳转到添加地址
			toAddress(){
				uni.navigateTo({
					url:'/pages/user/address_list?back=1'
				})
			},
		}
	}
</script>

<style lang="scss">
	.addre-has-txt{
		margin-left: 30rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 10rpx;
		}
	}
	.addre-has{
		width: 690rpx;
		height: 139rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-left: 30rpx;
		>image:nth-child(2){
			width: 14rpx;
			height: 24rpx;
			margin-right: 20rpx;
		}
	}
	.foot-txt{
		margin-left: 30rpx;
		margin-top: 31rpx;
		>view:nth-child(1){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>view:nth-child(2){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		>view:nth-child(3){
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FF5000;
		}
	}
	.foot-btn{
		width: 196rpx;
		height: 76rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 76rpx;
		margin-top: 11rpx;
		margin-right: 30rpx;
	}
	.foot{
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
	.res{
		color: #FF5000 !important;
	}
	.goods-info-detal{
		margin-bottom: 40rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.goods-info-money1{
		padding-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.goods-info-money{
		width: 690rpx;
		height: 270rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-left: 30rpx;
	}
	.goods-info-add{
		margin-top: 116rpx;
		>image:nth-child(1){
			width: 50rpx;
			height: 50rpx;
		}
		>view:nth-child(2){
			width: 70rpx;
			height: 50rpx;
			background: #F3F3F3;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			text-align: center;
			margin-left: 14rpx;
		}
		>image:nth-child(3){
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
			margin-left: 14rpx;
		}
	}
	.goods-info-price{
		margin-left: 20rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 12rpx;
		}
		>view:nth-child(2){
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 70rpx;
		}
	}
	.goods-info{
		// margin-top: 30rpx;
		margin-left: 30rpx;
		padding-top: 30rpx;
	}
	.goods-info-img{
		width: 172rpx;
	}
	.goods{
		width: 690rpx;
		// height: 232rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-left: 30rpx;
		padding-bottom: 30rpx;
	}
	.address-not-detal{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		>image:nth-child(2){
			width: 14rpx;
			height: 24rpx;
			margin-left: 12rpx;
			margin-right: 20rpx;
		}
	}
	.address-not-title{
		>view:nth-child(1){
			color: #E70013;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			margin-left: 20rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.addre{
		width: 690rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-left: 30rpx;
		line-height: 96rpx;
	}
	.top40{
		width: 750rpx;
		height: 40rpx;
	}
	.top20{
		width: 750rpx;
		height: 20rpx;
	}
</style>